<template>
    <div class="musiclist">
<div class="musictop">
    <div class="findlist">发现歌单</div>
    <div class="more">查看更多</div>
</div>
<div class="musicContent">
    <van-swipe :loop="false" :width="150" class="my-swipe" :show-indicators="false">
       
<van-swipe-item v-for="item in musiclist" :key="item">
     <router-link :to="{path:'/itemMusic', query:{id:item.id}}">
<img :src="item.picUrl"/>
<span class="playcount">
    <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-sousuo"></use></svg>
    {{changCount(item.playCount)}}
</span>
<span class="name">{{item.name}}</span>
</router-link>
</van-swipe-item>
</van-swipe>

</div>
</div>
</template>

<script>
import { getMusiclist } from '@/request/api/home';
    export default {
        data(){
            return{
                musiclist:[]
            }
        },
        methods:{
            async getlist(){
                let res =await getMusiclist()
              this.musiclist =res.data.result
              console.log(this.musiclist);
            },
            changCount:function(num){
                if(num>100000000){
return (num/100000000).toFixed(1)+"亿"
                }else if(num>10000){
                    return (num/10000).toFixed(1)+"万"
                }
            }
        },

        mounted(){
            this.getlist()
        }
    }
</script>

<style lang="less" scoped>
.musiclist{
    width: 100%;
    height: 64px;
    padding: 0.2rem;
    .musictop{
        width: 100%;
        height:0.6rem ;
        display: flex;
        justify-content: space-between;
        margin-top: .2rem;
        .findlist{
            font-size: 0.4rem;
            font-weight: 900;
        }
        .more{
            border: 1px solid #ccc;
            border-radius: 3.2px;
            line-height: 0.6rem;
        }
    }
    .musicContent{
        width: 100%;
        height: 200px;
        .my-swipe{
            height: 100%;
            position: relative;
            .van-swipe-item{
                margin-right: 5px;
            }
            img{
                width: 100%;
                height: 75%;
                border-radius: 8px;
            }
            .playcount{
position: absolute;
right: 0;
font-size: 17px;
color: #ffffff;
box-sizing:border-box;
z-index:100
            }
        }
    }
}
</style>